<template>
  <Headers page="order" />
  <div class="content">
    <el-result icon="success" title="下单成功" v-if="orderInfo">
      <template #extra>
        <el-button type="primary" @click="toHome">继续下单</el-button>
        
        <el-button type="danger" v-print="print">打印票据</el-button>
      </template>
    </el-result>
    <el-result icon="error" title="订单不存在" v-else>
      <template #extra>
        <el-button type="primary" @click="toHome">返回下单</el-button>
      </template>
    </el-result>
    <el-card style="margin: 10px" v-if="orderInfo">
      <el-row>
        <el-col :span="24">订单号：{{ orderInfo.ordersn }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">线路：{{ orderInfo.productname }}</el-col>
        <el-col :span="12">车型：{{ orderInfo.suits[0].name }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="14"
          >航班：{{ orderInfo.suits[0].usedate }}({{
            orderInfo.flight
          }})</el-col
        >
        <el-col :span="10" v-if="orderInfo.suits[0].drivernum == '1'"
          ><div style="color: red">含跟车司机</div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12">姓名：{{ orderInfo.linkman }}</el-col>
        <el-col :span="12">电话：{{ orderInfo.linktel }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">证件：{{ orderInfo.linkidcard }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">长度：{{ orderInfo.suits[0].cars[0].size }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          >车型：{{ orderInfo.suits[0].cars[0].cartype }}{{ orderInfo.remark?'('+orderInfo.remark+')':'' }}</el-col
        >
        <el-col :span="12"
          >车牌：{{ orderInfo.suits[0].cars[0].carnumber }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12">车辆价格：{{ orderInfo.suits[0].price }}</el-col>
        <el-col :span="12" v-if="orderInfo.suits[0].drivernum == '1'"
          >司机价格：{{ orderInfo.suits[0].driverprice }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12" v-if="orderInfo.suits[0].status == '2'"
          >订单状态：已支付</el-col
        >
        <el-col :span="12" v-if="orderInfo.suits[0].status == '5'"
          >订单状态：已核销</el-col
        >
        <el-col :span="12">支付方式：{{ orderInfo.paysource }}</el-col>
      </el-row>
    </el-card>
    <VueQrcode
      style="width: 200px; height: 200px; margin: 0 auto"
      v-if="orderInfo"
      :value="'https://www.chuandaolundu.com/h5/#/subPackages/verify/order?eticketno='+orderInfo.suits[0].eticketno"
      :color="{}"
      type="image/png"
    />
    <el-button type="success" size="large" @click="toBack">回程下单</el-button>
  </div>
  <div id="printContent" v-if="orderInfo">
    <div class="box">
      <div class="printBox">
        <div>
          <div>订单编号：{{ orderInfo.ordersn }}</div>
          <div>路　　线：{{ orderInfo.productname }}</div>
          <div>票　　类：{{ orderInfo.suits[0].name }}</div>
          <div>使用日期：{{ orderInfo.usedate }}（{{ orderInfo.flight }}）</div>
          <div>姓　　名：{{ orderInfo.linkman }}</div>
          <div>电　　话：{{ orderInfo.linktel }}</div>
          <div>车牌号码：{{ orderInfo.suits[0].cars[0].carnumber }}</div>
          <div>车辆票价：{{ parseFloat(orderInfo.suits[0].price).toFixed(2) }}</div>
          <div v-if="orderInfo.suits[0].drivernum == '1'">
            司机票价：{{ orderInfo.suits[0].driverprice }}
          </div>
          <div>
            操　　作：{{ orderInfo.saleman }}
          </div>
          <div>
            {{ orderInfo.addtime }}
          </div>
        </div>
        <div class="qrcode">
          <div v-if="orderInfo.suits[0].drivernum == '1'">含司机</div>
          <VueQrcode
            :value="'https://www.chuandaolundu.com/h5/#/subPackages/verify/order?eticketno='+orderInfo.suits[0].eticketno"
            :color="{}"
            :width="100"
            type="image/png"
          />
          <div>凭此二维码核销</div>
          <div>{{ orderInfo.suits[0].cars[0].cartype }}</div>
          <div>{{ orderInfo.paysource }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import Headers from "@/components/Header.vue";
import request from "@/utils/request";
import { ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import VueQrcode from "vue-qrcode";
const route = useRoute();
const router = useRouter();
const orderInfo = ref();

onMounted(async () => {
  const order = await getOrder();
  orderInfo.value = order;
});
const getOrder = async () => {
  let params = {
    url: "/scene/order/detail",
    method: "POST",
    data: {
      id: route.params.orderid,
    },
  };
  let res = await request(params);
  if (res.status) {
    return res.data;
  }
};
const toHome = () => {
  router.push({
    name: "order",
  });
};

const toBack = () => {
  router.push({
    name: "back",
    params: { orderid: orderInfo.value.id },
  });
};

const print = reactive({
  id: "printContent",
});
</script>

<style scoped>
.content {
  margin: 20px auto;
  max-width: 600px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mpt10 {
  margin-top: 10px;
}
.mpb10 {
  margin-bottom: 10px;
}
.fr {
  float: right;
}
#printContent {
  display: none;
}
@media print {
  @page {
    size: auto; /* auto is the initial value */
    margin: 0 0;
  }

  #printContent {
    display: flex;
  }
  .box {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .printBox {
    width: 95%;
    display: flex;
    flex-direction: row;
    margin-top:5px;
    transform: rotate(180deg);
    font-size: 12px;
    position: relative;
  }
  .printBox div{
    line-height: 20px;
  }
  .qrcode {
    position: absolute;
    margin: 20px 0 0 0px;
    text-align: center;
    right: 0px;
  }
}

.el-row {
  height: 26px;
}
</style>